<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>主界面</title>
</head>
<body >
<div class="easyui-panel" title=""  data-options="border:true">

    <!--表格-->
    <table id="attrInfoTable" class="easyui-datagrid" title="属性列表"
           data-options="singleSelect:true,toolbar:'#tb'">
        <thead>
             <tr>
                <th data-options="field:'id',width:100">属性id </th>
                <th data-options="field:'attrName',width:300">属性名</th>
              </tr>
        </thead>
    </table>


    <div id="tb" style="padding:5px;height:auto">
        <div style="margin-bottom:5px">
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addAttrInfo()">添加</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editAttrInfo()">编辑</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
        </div>
        <div>
            <!--三级联动效果-->
            一级分类：
            <select id="ctg1ForAttrList"  class="easyui-combobox"  style="width:100px"
                    data-options="valueField:'id',textField:'name',url:'basecatalog/1/list.json',
                 onSelect:function(rec){
                     //刷新二级分类的内容
                    $('#ctg2ForAttrList').combobox('reload','basecatalog/2/list.json?id='+rec.id);
                    //清空下级内容
                    $('#ctg2ForAttrList').combobox('clear');
                    $('#ctg3ForAttrList').combobox('clear');
                 }"></select>
            二级分类：
            <select id="ctg2ForAttrList" name="ctg2ForAttrList"   class="easyui-combobox" style="width:100px"
            data-options="valueField:'id',textField:'name',onSelect:function(rec){
                //刷新三级分类的内容
                 //清空下级内容
                $('#ctg3ForAttrList').combobox('clear');
                $('#ctg3ForAttrList').combobox('reload','basecatalog/3/list.json?id='+rec.id);
            }"></select>
            三级分类：
            <select name="ctg3ForAttrList" id="ctg3ForAttrList" class="easyui-combobox"  style="width:100px"
                data-options="valueField:'id',textField:'name',onSelect:function(rec){
                    //获取当前分类下的所有平台属性的列表
                    $('#attrInfoTable').datagrid({url:'basecatalog/attrs.json?id='+rec.id});
                }"></select>
               <a href="#" onclick="refreshTable()" class="easyui-linkbutton" iconCls="icon-search">刷新属性列表</a>
        </div>
    </div>

    <!--引入其他页面  jsp:include
    th:include=""里面写视图名：将目标内容引入进来
    -->
    <div th:include="attr/attrEdit"></div>


</div>
</body>
<script language="javascript">
    /*<![CDATA[*/

        //刷新表格
        function refreshTable() {
            //1、获取到当前三级分类的id
            var c3id = $("#ctg3ForAttrList").combobox('getValue');
            //2、刷新表格数据
            $('#attrInfoTable').datagrid({url:'basecatalog/attrs.json?id='+c3id});
        }

        //添加attrInfo的信息
        function addAttrInfo() {
            //确认三级分类是否被选中
            if(getCatalog3Info()!=null){
                //1、弹出对话框
                $("#attrDlg").dialog('open');
                //2、初始化对话框组件里面的内容。主要是清空可能由于之前的编辑还存在的值
                clearAttrDlgContent();
            }else{
                $.messager.alert('警告','请先选择三级分类');
            };

        }

        //编辑attrInfo属性
       function editAttrInfo() {
           //确认三级分类是否被选中
           if(getCatalog3Info()!=null){
               //1、获取被选中的平台属性
               if(getAttrInfo()==null){
                   $.messager.alert('警告','请先选择平台属性');
               }else{
                   //1、弹出对话框
                   $("#attrDlg").dialog('open');
                   //2、回显内容
                   var attrInfo = getAttrInfo();
                   //{id: 1, attrName: "励志读物", catalog3Id: 1}
                   $("#attrId").val(attrInfo.id);
                   $("#attrName").textbox('setValue',attrInfo.attrName);
                   //3、刷新平台属性的属性值列表
                   //   1)、设置允许修改的单元格
                   var datagrid = $("#attrInfoValueTable").datagrid({
                       url:'attr/value/'+attrInfo.id,
                       singleSelect:true,
                       onDblClickCell:onClickCell,
                       columns:[[
                           {field:'id',title:'属性值id',width:100},
                           {field:'valueName',title:'属性值名称',width:100,editor: {
                               type: 'validatebox', options: { required: true}  //必填项
                                //options指的是对这个type组件的设置
                                //type：能写的值就是form里面的表单组件名
                                //options：能写的值就是表单组件的data-options设置项
                             }
                           }
                       ]],
                       toolbar: [{
                           text:'添加',
                           iconCls: 'icon-add',
                           handler: function(){
                               //给表格中添加一行数据而且可以双击编辑的
                               $("#attrInfoValueTable").datagrid('appendRow',{
                                   id:'',
                                   valueName:'',
                                   attrId: getAttrInfo().id
                               });
                           }
                       },'-',{
                           text:'删除',
                           iconCls: 'icon-remove',
                           handler: function(){
                               //删除指定的行
                               //返回当前行的数据
                               var data = $("#attrInfoValueTable").datagrid('getSelected');
                               var index = $("#attrInfoValueTable").datagrid('getRowIndex',data);
                               $("#attrInfoValueTable").datagrid('deleteRow',index);
                           }
                       }]

                   })

               }


           }else{
               $.messager.alert('警告','请先选择三级分类');
           };
       }

       //返回三级分类信息
       function getCatalog3Info(){
            var id = $("#ctg3ForAttrList").combobox("getValue");
           var text = $("#ctg3ForAttrList").combobox("getText");
           var info = {id:id,name:text};

           if(id == ""){
               return null;
           }
           return info;
       }

       //返回被选中的平台属性的信息
       function getAttrInfo() {
          return  $("#attrInfoTable").datagrid('getSelected');
       }

       //清空弹框里面的内容
       function clearAttrDlgContent() {
           //1、所有组件赋值为null
           $("#attrName").textbox('clear');
           $("#attrId").val('')
           //2、表格数据清空；
           $("#attrInfoValueTable").datagrid({
               data:[],
               singleSelect:true,
               onDblClickCell:onClickCell,
               columns:[[
                   {field:'id',title:'属性值id',width:100},
                   {field:'valueName',title:'属性值名称',width:100,editor: {
                       type: 'validatebox', options: { required: true}  //必填项
                   }
                   }
               ]],
               toolbar: [{
                   text:'添加',
                   iconCls: 'icon-add',
                   handler: function(){
                       //给表格中添加一行数据而且可以双击编辑的
                       $("#attrInfoValueTable").datagrid('appendRow',{
                           id:'',
                           valueName:'',
                           attrId: ''//新增的情况下还没有平台属性id
                       });
                   }
               },'-',{
                   text:'删除',
                   iconCls: 'icon-remove',
                   handler: function(){
                       //删除指定的行
                       //返回当前行的数据
                       var data = $("#attrInfoValueTable").datagrid('getSelected');
                       var index = $("#attrInfoValueTable").datagrid('getRowIndex',data);
                       $("#attrInfoValueTable").datagrid('deleteRow',index);
                   }
               }]

           })


       }





    /*]]>*/
</script>

</html>